<template>
	<view class="">
		<view>
			<!-- 使用 uni-ui 提供的搜索组件 -->
			<uni-search-bar id="usbId" @input="input" :radius="100" cancelButton="none"></uni-search-bar>
		</view>
		<!-- 搜索建议列表 -->
		<!-- 
			当搜索结果列表的长度不为 0的时候（searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域
			当搜索结果列表的长度等于 0的时候（searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域 
		-->
		<view class="sugg-list" v-if="searchResult.length !== 0">
			<view class="sugg-item" v-for="(item,index) in searchResult" :key="index" @click="gotoDe(item.id)">
				<view class="goods-name">
					{{item.title}}
				</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history-box" v-else>
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="17" @click="delHistory"></uni-icons>
			</view>
			<!-- 列表区域 -->
			<view class="history-list" >
				<uni-tag circle type="error" @click="gotoGoodsList(item)" :text="item" v-for="(item,index) in historys" :key="index" >
					
				</uni-tag>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		//为什么要定义数据属性  
		//因为页面需要渲染数据  函数需要处理业务逻辑传参
		//调用接口返回数据  接口的数据不需要缓存 因为每一次都会从接口拿数据
		data() {
			return {
				sw:'',
				//延时器
				timer:null,
				// 搜索关键字
				word:'',
				searchResult:[], //搜索关键字返回的数据列表
				historyList:JSON.parse(uni.getStorageSync('history') || '[]') //搜索历史记录   localStorage
			};
		},
		onLoad(options){
			this.sw = options.sw
			this.enterEvent()
		},
		methods:{
			//绑定回车键
			enterEvent(){
				document.onkeydown = e =>{
					let body = document.getElementById('usbId')
					if(e.keyCode === 13 && body && this.word !== ''){
						this.getshurukuang(this.word)
					}
				}
			},
			getshurukuang(e){
				uni.navigateTo({
					url: '/pages/goods/goods-detail?id=' + e
				})
				console.log(e)
			},
			// 自带的输入组件
			input(e){
				clearTimeout(this.timer)
				// 防抖   延时器
				this.timer = setTimeout(() => {
					this.word = e
					this.getSearchResult()
				}, 500)
			},
			// 搜索接口
			async getSearchResult(){
				if(this.word === ''){
					this.searchResult = []
					return 
				}
				const res = await this.$myRequest({
					url:'/selectSearchList',
					data:{word:this.word}
				})
				this.searchResult = res.data
				console.log(res.data)
				//保存搜索历史
				this.saveSearchHistory()
			},
			gotoDe(e){
				// 点击跳往详情页面
				uni.navigateTo({
					url: '/pages/goods/goods-detail?id=' + e
				})
			},
			saveSearchHistory(){
				// 最新搜索排在前 去重
				this.historyList.push(this.word)
				this.saveSearchHistoryAdd()
			},
			saveSearchHistoryAdd(){
				uni.setStorageSync('history',JSON.stringify(this.historyList))
			},
			// 清空本地存储中记录的搜索历史
			delHistory(){
				// this.historyList = []
				uni.setStorageSync('history', '[]')
			},
			// 点击历史记录 跳转
			gotoGoodsList(e){
				uni.navigateTo({
					url: '/pages/goods/goods-detail?id=' + e
				})
			}
		},
		computed:{
			historys(){
				// 最新搜索的排在后面
				return [...new Set(this.historyList.reverse())]
			}
		}
	}
</script>

<style lang="scss">
	.uni-searchbar {
		display: flex;
		flex-direction: row;
		position: relative;
		padding: 16rpx;
		background-color: red;
	}
	.sugg-list {
		padding: 0 5px;
		.sugg-item {
			font-size: 12px;
			padding: 13px 0;
			border-bottom: 1px solid #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.goods-name {
				// 文字不允许换行（单行文本）
				white-space: nowrap;
				// 溢出部分隐藏
				overflow: hidden;
				// 文本溢出后，使用 ... 代替
				text-overflow: ellipsis;
				margin-right: 3px;
			}
		}
	}
	.history-box {
		padding: 0 5px;
		.history-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 40px;
			font-size: 13px;
			border-bottom: 1px solid #efefef;
		}
		.history-list {
			display: flex;
			flex-wrap: wrap;
			.uni-tag {
				margin-top: 5px;
				margin-right: 5px;
			}
		}
	}
</style>
